<template>
  <div class="dialog-body">
    <div class="form-group">
      <label>预约日期</label>
      <input type="date" :value="formData.date" @input="updateDate($event)" class="form-input" :min="minDate">
    </div>
    <div class="form-group">
      <label>送餐时间</label>
      <input type="time" :value="formData.time" @input="updateTime($event)" class="form-input">
    </div>
    <div class="form-group">
      <label>餐食选择</label>
      <div class="meal-options">
        <div 
          v-for="meal in meals" 
          :key="meal.id"
          class="meal-option"
          :class="{ active: formData.mealId === meal.id }"
          @click="selectMeal(meal.id)"
        >
          <img :src="meal.image" :alt="meal.name">
          <div class="meal-info">
            <h3>{{ meal.name }}</h3>
            <p>{{ meal.description }}</p>
            <span class="meal-price">¥{{ meal.price }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="form-group">
      <label>备注</label>
      <textarea 
        :value="formData.note" 
        @input="updateNote($event)"
        class="form-input" 
        rows="2" 
        placeholder="有什么特殊要求请在这里说明"
      ></textarea>
    </div>
  </div>
</template>

<script>
import { meals } from '@/data/meals';

export default {
  name: 'MealAppointment',
  props: {
    formData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      meals
    };
  },
  computed: {
    minDate() {
      const today = new Date();
      return today.toISOString().split('T')[0];
    }
  },
  methods: {
    selectMeal(id) {
      this.$emit('update:formData', {
        ...this.formData,
        mealId: id
      });
    },
    updateDate(event) {
      this.$emit('update:formData', {
        ...this.formData,
        date: event.target.value
      });
    },
    updateTime(event) {
      this.$emit('update:formData', {
        ...this.formData,
        time: event.target.value
      });
    },
    updateNote(event) {
      this.$emit('update:formData', {
        ...this.formData,
        note: event.target.value
      });
    },
    validate() {
      if (!this.formData.mealId) {
        return '请选择餐食';
      }
      return '';
    }
  }
};
</script>

<style scoped>
.meal-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.meal-option {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
}

.meal-option:hover {
  border-color: #3498db;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.meal-option.active {
  border-color: #3498db;
  background-color: #f8f9fa;
}

.meal-option img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.meal-info {
  padding: 15px;
}

.meal-info h3 {
  margin: 0 0 5px;
  font-size: 16px;
  color: #2c3e50;
}

.meal-info p {
  margin: 0 0 10px;
  color: #7f8c8d;
  font-size: 14px;
}

.meal-price {
  color: #e74c3c;
  font-weight: 600;
}
</style> 